<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0
        }
        .canvas{
            position: absolute;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="canvas">
        <canvas id="ctx" width="1920" height="1080" onmousemove='onMove()'></canvas>
    </div>
    

<script>
    function onMove(e) {
        var mouse = {x:0,y:0};
            var x,y;
            var e = e||window.event;
            if (e.layerX || e.layerY) {
                x = e.layerX
                y = e.layerY
            } else {
                x = e.clientX + document.body.scrollLeft ||document.documentElement.scrollLeft
                y = e.clientY + document.body.scrollTop ||document.documentElement.scrollTop
            }
            mouse.x = x
            mouse.y = y
            
            var cnv = document.getElementById('ctx')
            ctx = cnv.getContext('2d')
            ctx.clearRect(0,0,1920,1080)
            var img = new Image
            img.src = './person.png'
            ctx.drawImage(img, 0, 0)
            ctx.beginPath();
            ctx.arc(mouse.x,mouse.y,1920*2,0,Math.PI*2,true)
            ctx.closePath();
            var gnt = ctx.createRadialGradient(mouse.x, mouse.y, 50,mouse.x, mouse.y,500)
            gnt.addColorStop(0,'rgba(0,0,0,0)')
            gnt.addColorStop(0.5,'rgba(0,0,0,0.25)')
            gnt.addColorStop(1,'rgba(0,0,0,5)')
            ctx.fillStyle = gnt
            ctx.fill()
    }
</script>
</body>
</html>
